<template>
  <div class="mx-auto bg-image border-2 border-solid border-#AC8358 rounded-10px"
    :class="{ 'w-1200px': props.type === '全部', 'w-900px': props.type !== '全部' }">
    <div class="flex justify-between items-center p-2">
      <div class="bg-l-image m-x-4 m-t-4">推荐书籍</div>
      <div class="m-x-4 m-t-4">
        <span class=" text-#977D6A m-1 cursor-pointer">更多</span>
        <img class="flex-shrink-0 w-25px h-25px inline" src="/img/homeico.png" alt="" />
      </div>
    </div>
    <div flex="~  items-center" class="overflow-hidden">
        <div v-for="(book, index) in books" :key="index" 
          class="w-200px h-240px bg-white  m-10 p-2 flex flex-col shadow-lg  cursor-pointer">
            <img class="min-w-150px h-180px" :src="book.url" alt="" />
            <span class="whitespace-nowrap max-w-150px overflow-hidden text-ellipsis m-t-10px"><b>{{ book.name }}</b></span>
        </div>
      </div>

  </div>
</template>

<script lang="ts" setup>

interface Book {
  name: string,
  url: string,
}
const books = ref<Book[]>([
  {
    name: "西安史志(第一卷)",
    url: "https://ts3.cn.mm.bing.net/th?id=OIP-C.4_aDdf-ep8bxelu-33kpQwHaKF&w=214&h=291&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2",
  }, {
    name: "西安古籍",
    url: "https://ts3.cn.mm.bing.net/th?id=OIP-C.WoJdJe-m0x8yDn0E2rbXyAHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2",
  }, {
    name: "西安史志(第二卷)",
    url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.S7CWip1fWQrSbZcC9CSrVgHaJ4&w=216&h=288&c=8&rs=1&qlt=90&o=6&dpr=1.4&pid=3.1&rm=2",
  }, {
    name: "北陵区志",
    url: "https://tse2-mm.cn.bing.net/th/id/OIP-C.LbaMqfWWY9HTkQxjV75PKQHaHa?w=180&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7",
  }, {
    name: "西安史志(第三卷)",
    url: "https://tse1-mm.cn.bing.net/th/id/OIP-C.YQiivOZLdx1dl_yde4SfgQHaHa?w=206&h=206&c=7&r=0&o=5&dpr=1.4&pid=1.7",
  }, {
    name: "西安史志(第四卷)",
    url: "https://tse4-mm.cn.bing.net/th/id/OIP-C.Hsgm_2ayzp4_n5ly4C61mgHaHa?w=185&h=185&c=7&r=0&o=5&dpr=1.4&pid=1.7",
  },
])


const props = defineProps({
  type: {
    type: [Array, String],
    default: () => [],
  },
  isFF: {
    type: Boolean,
    default: false,
  },
})

</script>

<style lang="scss" scoped>
.bg-image {
  background-image: url('/img/homeBooks.png');
  background-repeat: round;


  .bg-l-image {
    background-image: url('/img/homeBookl.png');
    color: white;
    font-size: 1.6rem;
    width: 200px;
    padding-right: 2.25rem;
    line-height: 3.5rem;
    text-align: center;
    font-family: cursive;
  }

}
</style>
